<template>
    <div class="view">
        <div class="map-layer" id="mapView" :style="{'opacity':mapOpacity}"></div>
        <div class="logistics-head">
            <div class="logistics-back cubeic-back" @click="back"></div>
            <div class="product-picture" v-if="itemList.length > 0">
                <img :src="itemList[0].image.file_path">
            </div>
            <div class="logistics-status">{{orderAxis.length >0 ? orderAxis[0].status : '等待快递员揽收'}}</div>
        </div>
        <div class="logistics-head-mask" v-if="mapOpacity<=0"></div>
        <cube-scroll :data="orderAxis" :scroll-events="['scroll']" @scroll="onScrollHandle">
            <div class="logistics-space"></div>
            <div class="logistics-wrap">
                <div class="logistics-item" v-for="(axis,index) in orderAxis" :key="index">
                    <div class="date">
                        <div class="day">{{axis.time | timeSplitDay}}</div>
                        <div class="time">{{axis.time | timeSplitMinute}}</div>
                    </div>
                    <div class="circle">
                        <div class="icon"><i class="iconfont icon-yunshupeisong"></i></div>
                        <div class="line"></div>
                    </div>
                    <div class="text">{{axis.context}}</div>
                </div>
            </div>
            <div class="logistics-product-list">
                <div class="title">为您推荐</div>
                <div class="product-list">
                    <waterfall :data="rendomList">
                        <div class="product-item" v-for="product in rendomList" @click="toProductDetail(product.item_id)">
                            <div class="product-item-img">
                                <img :src="product.image[0].file_path">
                            </div>
                            <div class="product-item-title ellipsis-2">
                                {{product.name}}
                            </div>
                            <div class="product-item-price">
                                <div class="product-item-price-box">
                                    <span class="now-price">{{product.item_price}}</span>
                                    <span class="line-price">{{product.line_price}}</span>
                                </div>
                                <span class="product-item-sale">已售 {{product.sales_num}}</span>
                            </div>
                        </div>
                    </waterfall>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import DialogConfig from "@/constant/DialogConfig";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";
    import FilletCard from "@/components/aui/FilletCard.vue";
    import Waterfall from "vue-waterfall2/waterfall.vue";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            Waterfall
        }
    })
    export default class LogisticsDetail extends Scene {
        private orderAxis: any[] = [];
        private address: any = {};
        private itemList: any = [];
        private map: any = {};
        private rendomList: any[] = [];
        private mapOpacity: number = 1;

        @State("UserStore")
        public user!: InterfaceUser;

        private get orderId(): string {
            return String(this.$route.query.orderId || 0);
        }

        private get endKeyword(): any {
            if (this.address.order_address_id > 0) {
                return {
                    keyword: this.address.detail,
                    city: this.address.region.city
                };
            }
            return {};

        }

        private get startKeyword(): any {
            if (this.orderAxis.length > 0) {
                const lastAxis = this.orderAxis[this.orderAxis.length - 1];
                return {
                    keyword: lastAxis.areaName ? lastAxis.areaName.split(",")[1] : "",
                    city: lastAxis.context
                };
            }
            return {};
        }

        private get currentKeyword(): any {
            if (this.orderAxis.length > 0) {

                const lastAxis = this.orderAxis[0];
                if (lastAxis.status === "签收") {
                    return this.endKeyword;
                } else {
                    return {
                        keyword: lastAxis.areaName ? lastAxis.areaName.split(",")[1] : "",
                        city: lastAxis.context
                    };
                }
            }
            return {};
        }

        private back() {
            this.navigateBack();
        }

        private get mapShowHeight(): number {
            return document.body.clientHeight * .35;
        }

        private onScrollHandle(pos: any): void {
            let mapOpacity = (-pos.y / this.mapShowHeight);
            if (mapOpacity > 1) {
                mapOpacity = 1;
            }
            this.mapOpacity = 1 - mapOpacity;
        }

        private mounted() {
            const map: any = new AMap.Map("mapView", {
                zoom: 11,
                mapStyle: "amap://styles/macaron",
                features: ["bg", "road"]
            });
            this.map = map;


            Http.get(this.api.orderDetail, {order_id: this.orderId}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {

                    Http.get(this.api.mallRandomItem, {num: 10}).then((res) => {
                        if (res.code === 1) {
                            this.rendomList = res.data.list;
                        }
                    });
                    this.address = Object.assign({}, this.address, res.data.order.address);
                    this.itemList.push(...res.data.order.item);

                    Http.get(this.api.orderExpress, {order_id: this.orderId}, {token: this.user.token}).then((res) => {
                        if (res.code === 1) {
                            this.orderAxis.push(...res.data.express.list);
                            this.$nextTick(() => {
                                this.getPath();

                            });
                        }
                    });


                } else {
                    this.globalSingleResultToast(res);
                }
            });


        }

        private async getPath(): Promise<any> {
            const pathList: any = [];
            const result = await this.getDrivingList();
            const stepList: any = result.routes[0].steps;
            for (let j in stepList) {
                pathList.push(new AMap.LngLat(stepList[j].start_location.lng, stepList[j].start_location.lat));
                pathList.push(new AMap.LngLat(stepList[j].end_location.lng, stepList[j].end_location.lat));
            }
            const polyline = new AMap.BezierCurve({
                path: pathList,
                borderWeight: 2, // 线条宽度，默认为 1
                strokeColor: "#f00", // 线条颜色
                lineJoin: "round", // 折线拐点连接处样式
                isOutline: true,
                outlineColor: "#ffffff",
                strokeStyle: "dashed"
            });

            this.map.add(polyline);
            this.map.setFitView([polyline]);
        }

        private async getDrivingList(): Promise<any> {
            const driving = new AMap.Driving({
                hideMarkers: true,
                size: 4,
            });
            const drivingPromise = new Promise<PromiseLike<any>>((resolve, reject) => {
                driving.search([this.currentKeyword, this.endKeyword], function(status: any, result: any) {
                    if (status === "complete") {
                        resolve(result);
                    } else {
                        reject(result);
                    }
                });
            });
            return drivingPromise;
        }

        private getDrivingKeyword(obj: any = ""): any {
            if (obj) {
                const lastAxis = this.orderAxis[0];
                return {
                    city: obj.areaName ? obj.areaName.split(",")[1] : "",
                    keyword: obj.context
                };
            }
            return {};
        }

        private toProductDetail(id: string): void {
            this.navigateTo({
                name: "productDetail",
                query: {
                    id: id
                }
            });
        }


    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;

        .logistics-head-mask
            height calc(10px + var(--safe-area-inset-top) + 55px + 20px);
            left 0;
            top 0;
            right 0;
            z-index 9;
            position absolute;
            background $theme-page-common-background-color;

        .logistics-head
            height 55px;
            left 10px;
            right 10px;
            position absolute;
            background #fff;
            top calc(10px + var(--safe-area-inset-top));
            border-radius 7px;
            box-shadow #aaa 3px 3px 7px 1px;
            display flex;
            justify-content center;
            align-items center;
            z-index 10;

            .logistics-back
                height 55px
                line-height 55px;
                width 40px;
                color #666;
                font-size 18px;
                text-align center;

            .product-picture, .product-picture img
                height 33px;
                width 33px;
                border-radius 5px;

            .logistics-status
                flex 1;
                padding 0 10px;
                color #333;

        .logistics-space
            height 70vh;

        .logistics-wrap
            margin 10px;
            background #fff;
            padding 10px;
            position relative;
            border-radius 7px;

            .logistics-item
                padding 15px 0;
                display flex;

                .date
                    width 45px;
                    display flex;
                    flex-direction column;

                    .day
                        color #848484;
                        font-size 13px;
                        text-align right;
                        margin-top 3px;

                    .time
                        font-size 11px;
                        color #999999;
                        text-align right;
                        margin-top 3px;


                .circle
                    width 32px;
                    padding 0 5px;
                    position relative;

                    .icon
                        width 8px;
                        margin 8px auto auto auto;
                        height 8px;
                        border-radius 22px;
                        background #cbcac8;
                        z-index 3;
                        position absolute;
                        left 12px;
                        border 2px solid #fff;
                        display flex;
                        justify-content center;
                        align-items center;
                        color #fff;

                        i
                            display none;

                    .line
                        width 1px;
                        height calc(100% + 30px);
                        position absolute;
                        background #9e9e9e;
                        top -15px;
                        bottom -15px;
                        left 50%;
                        transform translateX(-.5px);
                        z-index 1;

                .text
                    color #9e9e9e;
                    line-height 1.3;
                    flex 1;


            .logistics-item:nth-child(1)
                .date
                    .day, .time
                        color $theme-common-color !important;

                .icon
                    margin-top 3px;
                    width 22px;
                    height 22px;
                    background $theme-common-gradient;
                    left auto;

                    i
                        display block;
                        font-size 12px;

                .line
                    background $theme-common-gradient;

                .text
                    color $theme-common-color;

        .map-layer
            width 100vw;
            height 100vh;
            position absolute;

        .logistics-product-list
            .title
                margin 10px 0;
                font-size 12px;
                color #939393;
                text-align center;
                line-height 1.25;

            .product-list
                display flex;
                flex-wrap wrap;
                padding-left 15px;

</style>